<template>
  <div>
    <h3>根组件</h3>

    <hr />

    <p>
      <button @click="num = 0">tab1</button>
      <button @click="num = 1">tab2</button>
    </p>

    <!-- 显示要切换的组件 -->
    <!--
      总结：
        a. 在vue中默认提供了可以直接切换组件的方式
        b. component 标签一定要配合 is 属性使用
        c. 如果is对应的组件是JS中声明的，那么要写成绑定属性的方式
        d. 在大量使用的时候，不是很方便
     -->
    <component :is="arr[num]"></component>
  </div>
</template>

<script>
import Page1 from './views/Page1.vue'
import Page2 from './views/Page2.vue'

export default {
  data() {
    return {
      num: 0,
      arr: [Page1, Page2]
      // str: 'p1',
      // obj: {
      //   p1: Page1,
      //   p2: Page2
      // }
    }
  }
}
</script>

<style lang="less" scoped>
button {
  padding: 6px 20px;
  margin: 10px 15px;
}
</style>
